<template>
  <div class="mine">
    <!-- 顶部 -->
    <div class="header">
      <!-- 员工头像 -->
      <div class="photo">
        <span style="text-align: center; display: block"
          ><van-image round width="6rem" height="6rem" :src="userInfo.userFace"
        /></span>
        <!-- 获取员工信息 -->
        <p style="text-align: center">{{ userInfo.username }}</p>
        <p style="text-align: center; font-size: 2px">可可喜欢家，家喜欢干净</p>
        <!-- 基本信息显示 -->
        <van-grid :border="false">
          <!-- 已完成 -->
          <van-grid-item text="已完成" />
          <!-- 待服务 -->
          <van-grid-item text="待服务" />
          <!-- 已支付 -->
          <van-grid-item text="已支付" />
          <!-- 余额 -->
          <van-grid-item text="余额" />
        </van-grid>

        <van-grid :border="false" style="text-align: center">
          <van-grid-item v-text="123" />
          <van-grid-item v-text="2" />
          <van-grid-item v-text="110" />
          <van-grid-item v-text="userInfo.balance" />
        </van-grid>
      </div>
    </div>
    <!-- 信息栏 -->
    <div class="conten">
      <!-- 实名验证 -->
      <van-cell title="实名验证" @click="realName" />
      <van-share-sheet v-model="showShare" />
      <!-- 提现 -->
      <van-cell title="提现" @click="txDialog" />
      <van-share-sheet v-model="showShare" />
      <!-- 收益信息 -->
      <van-cell title="收益信息" @click="profit" />
      <van-share-sheet v-model="showShare" />
      <!-- 个人信息 -->
      <van-cell title="个人信息" @click="personal" />
      <van-share-sheet v-model="showShare" />
    </div>
    <!-- 退出登录按钮 -->
    <div class="logout" style="margin-top: 100px">
      <p style="text-align: center">
        <van-button
          round
          type="info"
          style="width: 200px"
          color="linear-gradient(to right, #fbc2eb, #a6c1ee)"
          @click="LongOut"
          >退出登录</van-button
        >
      </p>
    </div>
    <!-- 提现弹框 -->
    <van-dialog
      v-model="xtshow"
      title="提现"
      show-cancel-button
      @confirm="Dialogqd(jine, (applyType = '提现'), userInfo.id)"
      @cancel="closeClear"
    >
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-form>
        <van-field
          v-model="jine"
          type="number"
          label="金额"
          placeholder="金额"
          name="validator"
          :rules="[{ validator, message: '请输入1-1000金额' }]"
        />
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
// 引入axios
import { get, post } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      showShare: false,
      // 用户头像
      userFace: "",
      // 用户名
      username: "",
      //  提现弹框显示
      xtshow: false,
      //金额
      jine: null,
    };
  },
  computed: {
    //获取数据
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /^\d{1,4}$/.test(val);
    },
    // 引入vuex中的mapActions
    ...mapActions("user", ["getUserInfo"]),
    // 退出登录
    ...mapMutations("user", ["delToken"]),
    // 获取员工信息

    //（确认、取消）的弹出框
    txDialog() {
      this.xtshow = true;
    },
    // 提现确定按钮
    async Dialogqd(money_1, applyType, userId) {
      if (money_1 > this.userInfo.balance) {
        Toast("余额不足！");
        this.jine = null;
      } else if (money_1 < 0) {
        Toast("输入的金额为负数！");
        //  break;
        this.jine = null;
      } else {
        Toast("提现成功，请查收！");
        let money = money_1.toString();
        console.log(money);
        let res = await post("/accountApply/submitAccountApply", {
          money,
          applyType,
          userId,
        });
      }
    },

    // 提现取消按钮
    closeClear() {
      this.jenumber = null;
    },
    // 获取员工信息
    queryUser() {
      let data = {
        page: 1,
        pageSize: 2,
      };
      this.getUserInfo(data);
    },
    // 跳转到个人信息页面
    personal() {
      //使用路由跳转
      this.$router.push({
        //路径
        path: "/manager/personal",
      });
    },
    // 收益信息路由跳转
    profit() {
      //使用路由跳转
      this.$router.push({
        // 路径
        path: "/manager/profit",
      });
    },
    // 实名验证路由跳转
    realName() {
      // 使用路由跳转
      this.$router.push({
        // 路径
        path: "/manager/realname",
        query: {
          userId: this.userInfo.id,
        },
      });
    },
    // 退出登录
    LongOut() {
      this.$router.push({
        path: "/login",
      });
    },
  },
  created() {
    //自动获取员工信息
    this.queryUser();
    //自动获取待服务数据
  },
};
</script>

<style scoped>
.header {
  background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
</style>